<template>
  <div class="inputWrapper">
    <input
      v-model="val"
      :type="type"
      :placeholder="placeholder"
      :class="{success: isValid,error:!isValid && val != ''}"
      @blur="handleBlur"
    />
  </div>
</template>

<script>
export default {
  name: "AuthInput",
  props: {
    placeholder: String,
    type: String,
    rule: RegExp,
    err_msg: String,
  },
  data() {
    return {
      val: "",
      isValid: false,
    };
  },
  watch: {
    val() {
      if (this.rule.test(this.val)) {
        this.isValid = true;
      } else {
        this.isValid = false;
      }
      this.$emit("valChange", this.val);
    },
  },
  methods: {
    handleBlur() {
      if (!this.isValid) {
        this.$toast.fail(this.err_msg);
      }
    },
  },
};
</script>

<style scoped lang="less">
.inputWrapper {
  padding-bottom: 20/360 * 100vw;
  input {
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid #888;
    font-size: 18/360 * 100vw;
    line-height: 36/360 * 100vw;
  }
  .success {
    border-bottom: 1px solid #0a0;
  }
  .error {
    border-bottom: 1px solid red;
  }
}
</style>
